<template>
  <div id="myDiv" ref="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "about",
  mounted() {
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);

    // 2.设置echarts数据
    // 设置轴
    let xData = ["美食", "数码", "科技", "蔬菜"];
    let yData = [99, 67, 45, 87];
    let option = {
      title: {
        text: "主标题",
      },
      xAxis: {
        // 配置x轴的参数
        data: xData,
        type: "category", // 坐标轴类型 value 数据轴  category 类目轴
      },
      yAxis: {
        // 配置y轴的参数
      },
      grid: {
        show: true,
        left: "20%",
        top: "20%",
        right: "20%",
        bottom: "20%",
        backgroundColor: "pink",
        borderColor: "yellow",
      },
      series: [
        // 系列1 配置图标的类型
        {
          name: "销量",
          type: "bar", // 系列类别
          data: yData,
          // color: "red",
          itemStyle: {
            normal: {
              color: function (parmas) {
                let colorList = ["#234512", "#c44c12", "#634d12", "#e34522"];
                return colorList[parmas.dataIndex];
              },
            },
          },
          // 最大值/最小值
          markPoint: {
            data: [
              // 标准的数据数组，每一项都是一个对象
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
          // 图标的标线
          markLine: {
            data: [
              {
                type: "average",
                name: "平均值",
              },
            ],
          },
        },
      ],
    };
    // 4.绘制图标
    myChart.setOption(option);
  },
};
</script>

<style>
#myDiv {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>